<template>
  <div class="bg-white rounded-lg shadow p-4 lg:p-6">
    <div class="flex justify-between">
      <div>
        <p class="text-sm font-medium text-gray-500 truncate">{{ title }}</p>
        <p class="mt-1 text-2xl font-semibold text-gray-900">{{ value }}</p>
      </div>
      <div class="p-3 rounded-full" :class="color + ' bg-opacity-10'">
        <span class="text-xl" :class="color">{{ icon }}</span>
      </div>
    </div>
    <div v-if="trend" class="mt-4 flex items-center">
      <span
        :class="`inline-flex items-center text-sm font-medium ${trend === 'up' ? 'text-green-600' : trend === 'down' ? 'text-red-600' : 'text-gray-500'}`">
        <svg v-if="trend !== 'stable'" :class="`h-4 w-4 ${trend === 'up' ? 'text-green-500' : 'text-red-500'}`"
          fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            :d="trend === 'up' ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7'" />
        </svg>
        {{ change || '' }}
      </span>
      <span v-if="trendText" class="ml-2 text-sm text-gray-500">{{ trendText }}</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  value: [String, Number],
  icon: String,
  color: {
    type: String,
    default: 'bg-gray-500'
  },
  trend: {
    type: String,
    validator: (value) => ['up', 'down', 'stable'].includes(value)
  },
  change: String,
  trendText: String
})
</script>